<template>
  <div class="df_pretest">
    <div class="pretest_top" @click="currentModularIndex += 1">
      <img src="../../assets/image/pretest/tit.png" alt="" />
    </div>
    <div class="pretest_back">
      <div class="pretest_form">
        <router-view>
          
        </router-view>  
        <!-- 未答题弹框 -->
        <div class="not_answer_box" v-if="showAnswerBox">
          还有未做答题哦, 请先完成当前题!
        </div>
      </div>
    </div>

    <!-- 下一组 -->
    <div class="next_group" @click="nextGroup">
      <img src="../../assets/image/pretest/notnext.png" alt="" />
    </div>
    <!-- <div class="pretest_btn" @click="changePretest">
      提交测试
    </div> -->
  </div>
</template>
  
<script>
import pretestCon from "@/components/pretestCon";
export default {
  name: "Pretest",
  components: {
    pretestCon,
  },
  data() {
    return {  
      // 是否显示未做完答题弹框
      showAnswerBox: false,
      // 引导页展示
      guidePageTips: true, 
      readSpanStemlist: [
        {
          id: 1,
          stem_id: 4,
          content: "<p>题干</p>",
          score: "10",
          answer_time: 10,
          question: [
            {
              id: 1,
              question_id: 12,
              question: "测试22",
              score: "0",
              answer_time: 0,
              answer: [
                {
                  id: 1,
                  answer_id: 21,
                  question_id: 12,
                  answer_content: "\n请选择2",
                },
                {
                  id: 2,
                  answer_id: 20,
                  question_id: 12,
                  answer_content: "请选择1",
                },
              ],
            },
            {
              id: 1,
              question_id: 12,
              question: "测试22",
              score: "0",
              answer_time: 0,
              answer: [
                {
                  id: 1,
                  answer_id: 21,
                  question_id: 12,
                  answer_content: "\n请选择211111111",
                },
                {
                  id: 2,
                  answer_id: 20,
                  question_id: 12,
                  answer_content: "请选择1111",
                },
              ],
            },
            {
              id: 1,
              question_id: 12,
              question: "测试22",
              score: "0",
              answer_time: 0,
              answer: [
                {
                  id: 1,
                  answer_id: 21,
                  question_id: 12,
                  answer_content: "\n请选择2",
                },
                {
                  id: 2,
                  answer_id: 20,
                  question_id: 12,
                  answer_content: "请选择1",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  mounted() {
    console.log(pretestCon);
  },
  methods: {
    changePretest() {
      console.log("提交");
    },
    // 下一组
    nextGroup() {
      this.guidePageTips = false;
    },
  },
};
</script> 
<style lang="less" scoped>
.df_pretest {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("../../assets/image/pretest/back.png") no-repeat;
  background-size: 100% 100%;

  .pretest_top {
    margin: 0.35rem auto 0 auto;
    width: 2.49rem;
    height: 0.67rem;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
  .pretest_back {
    margin: 1.68rem auto 0 auto;
    width: 11.14rem;
    height: 6.33rem;
    background: #fafcff;
    box-shadow: 0px 5px 17px 0px rgba(163, 201, 229, 0.46);
    border-radius: 10px;
  }

  .pretest_form {
    margin: 0 auto;
    position: relative;
    width: 10.45rem;
    height: 6.35rem;
    overflow: hidden;
    background: url("../../assets/image/pretest/backbox.png") no-repeat;
    background-size: 100% 100%;
    // 阅读广度
    .pretest_con {
      padding: 0.46rem 0.67rem 0.3rem 0.81rem;
      width: 100%;
      height: 100%;
      color: #373737;
      font-size: 0.21rem;
      box-sizing: border-box;
      // 题干
      .pretest_con_stem {
        .topic_item {
          .topic_item_t {
            margin-top: 0.5rem;
            width: 0.7rem;
            height: 0.3rem;
            line-height: 0.3rem;
            color: #2175f4;
            text-align: center;
            background: #dce6ff;
            border-radius: 6px 18px 18px 18px;
          }

          .topic_item_p {
            padding-left: 0.6rem;
            font-size: 0.21rem;
            line-height: 0.64rem;
            color: #373737;
          }
        }
      }
      // 问题选项
      .pretest_con_problem {
        .topic_item {
          font-size: 0.21rem;
          .topic_item_t {
            display: flex;
            align-items: center;
            .item_t_num {
              margin-right: 0.63rem;
              padding: 0 0.11rem;
              height: 0.3rem;
              font-size: 0.18rem;
              color: #fff;
              background: linear-gradient(117deg, #ff6c4f 0%, #ff3333 100%);
              border-radius: 0px 10px 10px 10px;
            }
            & > img {
              margin: 0 0.2rem;
              width: 0.75rem;
              height: 0.75rem;
            }
          }

          .topic_item_p {
            display: flex;
            flex-wrap: wrap;
            margin: 0.3rem 0;
            padding-left: 0.59rem;
            .item_p_sel {
              position: relative;
              margin: 0.13rem 0.4rem;
              // padding: 0 .3rem 0 .6rem;
              padding: 0 0.86rem 0 0.98rem;
              height: 0.85rem;
              line-height: 0.85rem;
              text-align: center;
              color: #333;
              font-size: 0.18rem;
              border: 1px solid #c8c7c4;
              border-radius: 45px;
              cursor: pointer;
              .target {
                position: absolute;
                top: 50%;
                left: 0.31rem;
                transform: translateY(-60%);
                width: 0.35rem;
                height: 0.38rem;
              }
            }
            .curr_item_p_sel {
              background: #e8edf3;
            }
          }
        }
      }
    }

    // 未做完题弹框提醒
    .not_answer_box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 4.49rem;
      height: 0.86rem;
      line-height: 0.86rem;
      text-align: center;
      opacity: 0.8;
      color: #fff;
      font-size: 0.21rem;
      border-radius: 10px;
      background: #3640b6;
    }
  }
  .next_group {
    margin: 0.31rem auto 0 auto;
    width: 1.35rem;
    height: 0.61rem;
    cursor: pointer;
    & > img {
      width: 100%;
      vertical-align: top;
    }
  }
  .pretest_btn {
    margin: auto;
    width: 1.58rem;
    height: 0.56rem;
    line-height: 0.56rem;
    font-size: 0.21rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(0deg, #eb9c07, #ffbf34);
    box-shadow: 0px 6px 8px 0px rgba(208, 157, 62, 0.44),
      0px 4px 1px 0px #ffdc99;
    border-radius: 0.1rem;
    cursor: pointer;
  }
}
</style>
